<template>
  <div class="app-container">
    <el-card class="m-t-15 el-card-dict">
      <div slot="header" class="flex-cls-nowrap-spc-btw">
        <span>拖拽弹框</span>
      </div>
      <el-button type="text" @click="dialogVisible = true">打开拖拽弹框</el-button>
      <el-dialog
        v-el-drag-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>可拖拽弹框使用</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>

// 拖拽弹框指令
import elDragDialog from "@/directive/el-drag-dialog";

export default {
  directives: { elDragDialog },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>
